<template>
	<view class="content">
		<view class="main">

			<view class="menu_name">异常原因</view>
			<view class="yc_reason" @click="onSelReason">
				<view>{{reason.name || '点击选择异常原因'}}</view>
				<view> ▼ </view>
			</view>

			<view class="menu_name">详细描述</view>
			<textarea class="et_desc" placeholder="请详细描述异常情况" @input="onInputDesc" />

			<view class="menu_name">
				上传照片
				<view style="font-size: 24rpx;color: #aaa;margin: 0 0 0 6rpx;">点击图片查看大图</view>
			</view>
			<view class="item_sel_img">
				<view v-for="(item,index) in img_list" class="sel_img_div">
					<image class="sel_img" :src="item" @click="onPreviewImg(index)"></image>
					<view class="sel_img_del" @click="onDelImg(index)">删除</view>
				</view>
			</view>
			<button class="btn_sel_media" @click="onSelImg">选择照片</button>

			<view class="menu_name">
				上传视频
				<view style="font-size: 24rpx;color: #aaa;margin: 0 0 0 6rpx;">请上传mp4格式</view>
			</view>
			<view style="margin: 12rpx 0 12rpx 0;">
				<video v-if="video_url" :src="video_url"></video>
			</view>
			<button class="btn_sel_media" @click="onSelVideo">选择视频</button>

			<view class="btn_ok" @click="onOk">提交上报</view>

		</view>


		<!-- 展示弹窗 -->
		<uni-popup ref="popup" type="center" :is-mask-click="true">
			<view class="pop_div">
				<view style="display: flex;justify-content: space-between;text-align: center;width: 100%;height: 80rpx;">
					<view style="width: 20%;line-height: 80rpx;color: #aaa;" @click="onClosePop(0)">取消</view>
					<view style="width: 60%;line-height: 80rpx;">选择异常原因</view>
					<view style="width: 20%;line-height: 80rpx;color: deepskyblue;" @click="onClosePop(1)">确定</view>
				</view>
				<picker-view style="height: 400rpx;width: 100%;text-align: center;" @change="onPickerChange">
					<picker-view-column>
						<view v-for="(item,index) in reason_list">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import { getUInfo, isZhuijia } from '@/util/util.js'
	import { chooseAndUploadImg, chooseAndUploadVideo } from '@/util/uni_util.js'
	export default {
		data() {
			return {
				query_num: '', // 查货单号

				img_list: [], // 选择的照片
				video_url: '', // 选择的视频

				reason_list: [], // 异常原因
				reason: {}, // 当前选择的原因
				reason_index: 0, // 当前原因索引

				desc: '', // 描述
			}
		},

		mounted() {
			this.getReason()
		},

		onLoad(opts) {
			// 扫码
			uni.$on('onGetQrCode', (data) => {
				let { qr_code, od_num, startCity, toCity, goods } = JSON.parse(data.qr_code_data)
				this.query_num = qr_code
			})
		},
		onUnload() {
			uni.$off('onGetQrCode', () => {})
		},

		methods: {

			// 监听:输入描述
			onInputDesc(e) {
				this.desc = e.detail.value
			},
			onClosePop(isConfirm) {
				if (isConfirm == 1) {
					this.reason = this.reason_list[this.reason_index]
				}
				this.$refs.popup.close()
			},
			// 监听:选择原因的picker变化
			onPickerChange(e) {
				this.reason_index = e.detail.value[0]
			},
			// 选择原因
			onSelReason() {
				this.reason_index = 0
				this.$refs.popup.open('center')
			},
			async onSelVideo() {
				let res = await chooseAndUploadVideo()
				console.log('上传结果 = ', res);
				this.video_url = res
			},
			// 选择上传照片
			async onSelImg() {
				if (this.img_list.length >= 20) {
					uni.showToast({ icon: 'none', title: `最多上传${this.img_list.length}张照片` })
					return
				}
				let res = await chooseAndUploadImg()
				this.img_list.push(res)
			},
			// 预览照片
			onPreviewImg(current) {
				uni.previewImage({
					current,
					urls: this.img_list,
					success: (res) => {},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				})
			},
			// 删除照片
			onDelImg(index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除该照片？',
					success: (res) => {
						if (res.confirm) {
							// 从index开始删除1个元素
							that.img_list.splice(index, 1)
						}
					},
				})
			},

			// 提交上报
			onOk() {
				if (!this.reason || !this.reason.name) {
					uni.showToast({ icon: 'none', title: '请选择异常原因' })
					return
				}
				if (!this.desc) {
					uni.showToast({ icon: 'none', title: '请输入详细描述' })
					return
				}
				if (!this.img_list || this.img_list.length <= 0) {
					uni.showToast({ icon: 'none', title: '请上传照片' })
					return
				}

				if (isZhuijia(getUInfo())) {
					console.log('追加异常信息');
				}

				uni.showModal({
					title: '提示',
					content: '确认上报以上信息？',
					success: (res) => {
						res.confirm && this.uploadAbnormal()
					}
				})
			},

			// 接口:异常原因
			async getReason() {
				let that = this
				let token = getUInfo().token
				// uni.showLoading({ title: '加载中..', mask: true, })
				let res = await that.$getReason({})
				if (res.code == 1) {
					this.reason_list = res.data
					this.reason = this.reason_list[0]
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:上报异常
			async uploadAbnormal() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '上报中..', mask: true, })
				let img = this.img_list.join(',')
				let video = this.video_url
				let query_num = this.query_num
				let describe = this.desc
				let reason = this.reason.name
				let res = await that.$uploadAbnormal({ token, reason, describe, img, video, query_num })
				console.log('uploadAbnormal.res = ', res);
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						confirmText: '继续上报',
						cancelText: '退出',
						success: (res) => {
							if (res.confirm) {

							} else {
								uni.switchTab({ url: '/pages/index/index' })
							}
						}
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
		/* background-color: #f0f0f0; */
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		margin: 36rpx 0 0 0;
		display: flex;
		align-items: center;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
		/* font-size: 28rpx; */
		/* color: #666; */
	}

	.order_div {
		padding: 24rpx;
		background: white;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 12rpx 0 0 0;
	}

	.et_wb_num {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 25%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.et_desc {
		width: calc(100% - 48rpx);
		height: 200rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 24rpx;
	}

	/* 选择异常原因 */
	.yc_reason {
		display: flex;
		justify-content: space-between;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.item_sel_img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
	}

	.sel_img_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 选择的照片 */
	.sel_img {
		width: 132rpx;
		height: 132rpx;
		margin: 16rpx 0 0 16rpx;
		border: solid 1rpx #999;
		border-radius: 12rpx;
		/* padding: 1rpx; */
	}

	.sel_img_del {
		padding: 6rpx;
		color: orangered;
		margin: 0 0 0 16rpx;
	}

	.btn_sel_media {
		width: 300rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 60rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 75vw;
		/* height: 48vh; */
		background-color: white;
		/* border-radius: 20rpx; */
	}
</style>